import React from 'react'
import {Link} from 'react-router-dom'
import {Layout, Row, Col, Menu,message, Dropdown, Modal, Input, Button, Table, Tooltip,} from 'antd';

import {
    DownOutlined,
    FormOutlined,
    CopyFilled,
    PrinterFilled,
} from "@ant-design/icons";
import axios from "axios";
import * as url from "../../../util/api";
import './PurchaseOrderDetail.css'
import {inject, observer} from "mobx-react";
const {Search} = Input;
const customerSearchColumns = [

    {
        title: '客户名称',
        dataIndex: 'customerName',

    },
    {
        title: '客户编码',
        dataIndex: 'customerNo',

    },
    {
        title: '地区',
        dataIndex: 'area',
    },
    {
        title: '级别',
        dataIndex: 'level',
    },

];
const customerSearchTableData = [];
@inject('orderStore')
@observer
class ReturnOrderDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countMoney: '0.00',
            visible: false,
            orderTypeText: '全部级别',
            selectValue: 1,
            current: '退单详情',
            orderNo: ' DH-O-20200508-405868 ',
            customerName: '小雷家电线厂',
            value: 1,
            logVisible: false,
        }
    }

    handleClick = e => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    };
    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectValue: value,
        })
    }
    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    getReturnOrderDetail = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        axios({
            url: url.orderOrderDetails,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                // resp.data.data.goodsId.map(item => {
                //     //查询商品信息
                //     this.getGoodsInfo(item)
                // })
            }

        }).catch(err => {
            console.log(err);
        })

    }
    checkReturnOrder = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        axios({
            url: url.orderReturn_goods,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)
            }

        }).catch(err => {
            console.log(err);
        })

    }
    checkReturnMoney = () => {
        let obj = {orderMainId: this.props.orderStore.orderMainId}
        console.log(obj);
        axios({
            url: url.orderReturn_money,
            method: 'post',
            data: obj,
        }).then(resp => {
            console.log(resp);
            if (resp.data.code === 200) {
                message.success(resp.data.msg)
            }

        }).catch(err => {
            console.log(err);
        })

    }

    componentDidMount() {
        console.log(this.props.location);
        this.getReturnOrderDetail();
    }

    render() {

        const customerTypeMenu = (
            <Menu>
                <Menu.Item>
                    <a className={'全部级别' === this.state.orderTypeText ? "active" : null} rel="noopener noreferrer"
                       href='true'
                       onClick={e => this.handleMenuClick(e, '全部级别')}>
                        全部级别
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a className={'普通' === this.state.orderTypeText ? "active" : null}
                       rel="noopener noreferrer" href='true' onClick={e => this.handleMenuClick(e, '普通')}>
                        普通
                    </a>
                </Menu.Item>
            </Menu>
        );

        return (<div style={{padding: 10, position: 'relative'}}>
            <Row>
                <Col span={14} className={'oMenu'}>
                    <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">

                        <Menu.Item key="退单详情">
                            <Link to={'/homepage/returnOrderDetail/returnOrderDetailItem'}> 退单详情</Link>
                        </Menu.Item>
                        <Menu.Item key="退款记录">
                            <Link to={'/homepage/returnOrderDetail/returnOrderMoneyRecord'}> 退款记录</Link>
                        </Menu.Item>
                        <Menu.Item key="收货记录">
                            <Link to={'/homepage/returnOrderDetail/returnOrderDeliverGoods'}> 收货记录</Link>
                        </Menu.Item>
                    </Menu>
                </Col>
                <Col span={10} style={{borderBottom: '1px solid #F0F0F0',}}>
                    <Row align={'middle'} style={{height: '100%'}}>
                        <Col span={24} align={'right'}>
                            <span className={'btClass'}><FormOutlined/> 修改</span>
                            <span className={'btClass'}><CopyFilled/> 复制</span>
                            <span className={'btClass'}><PrinterFilled/> 打印</span>
                            <span className={'btClass'}><span className={'iconfont icon-ziyuan'}/> 导出</span>
                            <span className={'btClass'}><span className={'iconfont icon-zuofei'}/> 作废</span>
                            <Button style={{
                                marginLeft: 20,
                                width: 80,
                                borderRadius: 4,
                                backgroundColor: '#12C09F',
                                color: 'white'
                            }} onClick={this.checkReturnMoney}>通过</Button>
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Modal
                title=""
                width={'100%'}
                visible={this.state.visible}
                cancelText={'取消'}
                okText={'确定'}
                closable={false}
                footer={[]}
            >
                <Row align={'middle'}>
                    <Col span={2} style={{fontSize: '1.2rem'}}>
                        选择客户
                    </Col>
                    <Col span={2}>
                        <Tooltip placement="bottomRight" title={this.state.orderTypeText} mouseLeaveDelay='0'
                                 mouseEnterDelay='.5'>
                            <Dropdown overlay={customerTypeMenu} trigger={['click']}>
                                <a className="dropdownItem currentOrderType" href='true'
                                   onClick={e => e.preventDefault()}>
                                    {this.state.orderTypeText} <DownOutlined/>
                                </a>
                            </Dropdown>
                        </Tooltip>
                    </Col>
                    <Col span={6}>
                        <Search
                            placeholder="输入名称/编码/联系人/手机"
                            onSearch={value => console.log(value)}
                            style={{width: '100%', marginLeft: '-1rem'}}
                        />
                    </Col>
                </Row>
                <Row align={'middle'} style={{marginTop: '1rem'}}>
                    <Col span={24}>
                        <Table
                            columns={customerSearchColumns}
                            dataSource={customerSearchTableData}
                            className='table'
                        />
                    </Col>

                </Row>
                <Row align={'middle'} style={{marginTop: '1rem'}}>
                    <Col span={24} align={'left'} style={{paddingRight: '1rem'}}>
                        <Button onClick={this.handleCancel}>取消</Button>
                        <Button onClick={this.handleOk}
                                style={{backgroundColor: '#12C09F', color: 'white', margin: '0 1rem'}}>确定</Button>
                        <span style={{color: '#F33333'}}>修改客户后，将清除已选择的商品数据，确定修改？</span>
                    </Col>

                </Row>

            </Modal>
            <Layout>
                {this.props.children}
            </Layout>

            <Row className={'bottomBt'} align={'middle'}>
                <Col span={24} align={'center'}>
                    <Button>返回</Button>
                </Col>

            </Row>

        </div>);

    }
}

export default ReturnOrderDetail
